<template>
  <div class="pa-3">
    <h3>{{ course.name }}</h3>
    <v-select
      v-model="currentIndex"
      :items="course.episodes.map((v, i) => ({ text: v.name, value: i }))"
    ></v-select>
    <img width="50%" :src="episode.fileUrl" alt="" />
  </div>
</template>

<script>
export default {
  async asyncData({ params, $axios }) {
    const course = await $axios.$get(`courses/${params.id}`, {
      params: {
        // 关联查询episodes
        query: { populate: 'episodes' }
      }
    })
    return {
      course,
      id: params.id
    }
  },
  data() {
    return {
      currentIndex: 0
    }
  },
  computed: {
    episode() {
      return this.course.episodes[this.currentIndex]
    }
  }
}
</script>
